<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="90">
          <FormItem label="视频类型">
            <Select :transfer="true" size="small" v-model="sourcesType">
              <Option value="application/x-mpegURL">application/x-mpegURL</Option>
            </Select>
          </FormItem>
          <FormItem label="视频地址">
            <div class="m-t-5px"></div>
            <Input type="textarea" :rows="4" size="small" v-model="sourcesSrcData" placeholder="优先级次于数据源结果集中的URL地址" @on-blur="updateSourcesSrc"/>
          </FormItem>

          <FormItem label="封面图片">
            <div class="m-t-5px"></div>
            <UploadImageButton v-model="posterRelativePath" :page-id="$PnUtil.getUrlParam('page_id')"></UploadImageButton>
            <i-input size="small" v-model="posterRelativePath" disabled>
              <Button slot="append" icon="md-close" @click="posterRelativePath = ''"></Button>
            </i-input>
            <div class="m-b-5px"></div>
          </FormItem>
          <FormItem label="固定比例">
            <Select :transfer="true" size="small" v-model="aspectRatio" clearable>
              <Option v-for="item in aspectRatios" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="自动播放">
            <i-switch v-model="autoplay">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="静音">
            <i-switch v-model="muted">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="无法播放提示">
            <Input size="small" v-model="notSupportedMessage"/>
          </FormItem>
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="HlsVideoComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'HlsVideoCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {
        sourcesSrcData: '',
        aspectRatios: [
          {
            label: '16:9',
            value: '16:9'
          },
          {
            label: '4:3',
            value: '4:3'
          }
        ]
      }
    },
    mounted() {
      if (this.sourcesSrc) {
        this.sourcesSrcData = this.sourcesSrc
      }
    },
    methods: {
      updateSourcesSrc () {
        this.updateField('component.compConfigData.sourcesSrc', this.sourcesSrcData)
      }
    },
    computed: {
      ...mapFields({

        autoplay: 'component.compConfigData.autoplay',
        muted: 'component.compConfigData.muted',
        aspectRatio: 'component.compConfigData.aspectRatio',
        sourcesType: 'component.compConfigData.sourcesType',
        sourcesSrc: 'component.compConfigData.sourcesSrc',
        posterRelativePath: 'component.compConfigData.posterRelativePath',
        notSupportedMessage: 'component.compConfigData.notSupportedMessage',

      })
    }
  }
</script>

<style scoped>

</style>
